<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { Table, Tag } from 'ant-design-vue';
import type { PhotographerApi } from '#/api/wedding/photographer/index';
import { getPhotographyOrders } from '#/api/wedding/photographer/index';
import dayjs from 'dayjs';

const props = defineProps<{
  photographerCode: string;
}>();

const loading = ref(false);
const orders = ref<PhotographerApi.PhotographyOrder[]>([]);

const columns = [
  { title: '订单ID', dataIndex: 'orderId', key: 'orderId', width: 180 },
  { title: '客户姓名', dataIndex: 'customerName', key: 'customerName', width: 120 },
  { 
    title: '拍摄时间', 
    dataIndex: 'shootingTime', 
    key: 'shootingTime', 
    width: 180,
    customRender: ({ text }: any) => dayjs(text).format('YYYY-MM-DD HH:mm'),
  },
  { title: '拍摄地点', dataIndex: 'shootingLocation', key: 'shootingLocation', showOverflow: true },
  { title: '拍摄数量', dataIndex: 'photoCount', key: 'photoCount', width: 100 },
  { title: '精修数量', dataIndex: 'retouchCount', key: 'retouchCount', width: 100 },
  { 
    title: '服务金额', 
    dataIndex: 'serviceAmount', 
    key: 'serviceAmount', 
    width: 120,
    customRender: ({ text }: any) => `¥${text}`,
  },
  { 
    title: '已付金额', 
    dataIndex: 'paidAmount', 
    key: 'paidAmount', 
    width: 120,
    customRender: ({ text }: any) => `¥${text}`,
  },
  { title: '状态', key: 'status', width: 100, slots: { customRender: 'status' } },
  { 
    title: '交付时间', 
    dataIndex: 'deliveryTime', 
    key: 'deliveryTime', 
    width: 180,
    customRender: ({ text }: any) => text ? dayjs(text).format('YYYY-MM-DD') : '-',
  },
  { 
    title: '创建时间', 
    dataIndex: 'createTime', 
    key: 'createTime', 
    width: 180,
    customRender: ({ text }: any) => dayjs(text).format('YYYY-MM-DD HH:mm'),
  },
];

const loadOrders = async () => {
  loading.value = true;
  try {
    orders.value = await getPhotographyOrders(props.photographerCode);
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  loadOrders();
});
</script>

<template>
  <div>
    <Table
      :dataSource="orders"
      :columns="columns"
      :loading="loading"
      :pagination="{ pageSize: 10, showSizeChanger: true }"
      :scroll="{ x: 1600 }"
      size="small"
    >
      <template #status="{ record }">
        <Tag 
          :color="
            record.status === '已完成' ? 'success' :
            record.status === '进行中' ? 'processing' :
            record.status === '已预约' ? 'warning' :
            record.status === '已取消' ? 'error' :
            'default'
          "
        >
          {{ record.status }}
        </Tag>
      </template>
    </Table>
  </div>
</template>

